<template>
  <lay-container fluid="true" style="padding: 10px">
    <lay-card style="padding:10px;">
      <lay-row space="10">
        <lay-form :model="formCate">
          <lay-col :md="24">
            <lay-form-item label="公文类别" prop="ContentCateRole">
              <lay-tree :data="treeData" v-model:checkedKeys="checkedKeys" :showCheckbox="true" collapse-transition>
              </lay-tree>
            </lay-form-item>
          </lay-col>
        </lay-form>
        <lay-col :md="24" class="saveBtn">
          <lay-button @click="submitClickCate" type="primary" v-permission="PerKey.UserDept_AddOrEdit"
            prefix-icon="layui-icon-ok-circle">
            保存
          </lay-button>
        </lay-col>
      </lay-row>
    </lay-card>
  </lay-container>
</template>

<script lang="ts" name="DocCatRes" setup>
import { ref, toRefs, reactive } from "vue";
import { layer } from "@layui/layer-vue";
import { getEditDocRes, putEditDocRes } from "../../../../api/module/user/userdept";
import { PerKey } from "../../../../library/permissionConst"

interface sProps {
  deptId: number,
}
const props = withDefaults(defineProps<sProps>(), {
  deptId: 0,
});

const dataCate = reactive({
  formCate: {
    id: 0,
    docCatRole: "",
    name: "",
  }
})

const { formCate } = toRefs(dataCate)
const treeData = ref([])
const checkedKeys = ref([])
getEditDocRes(props.deptId).then((res) => {
  checkedKeys.value = [];
  if (res.status == 1) {
    treeData.value = res.data.allTree
    let data = res.data.data
    formCate.value = {
      id: data.id,
      name: data.name,
      docCatRole: ""
    }
    let cate = JSON.parse(data.docCatRole)
    if (cate != null) {
      var turnNum = function (cate: any) {
        return cate.map(Number);
      }
      checkedKeys.value = turnNum(cate)
    }
  }
})

const emits = defineEmits(['update:DocIsOk']) 

const submitClickCate = function () {
  formCate.value.docCatRole = JSON.stringify(checkedKeys.value)
  putEditDocRes(formCate.value).then((res) => {
    if (res.status == 1) {
      layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
        emits('update:DocIsOk', 1)
      });
    } else {
      layer.msg(res.msg, { icon: 2 });
      return false;
    }
  });
}

</script>

<style scoped>

</style>